<template>
  <article
    class="flex relative flex-col justify-center items-start self-stretch my-auto min-w-60 w-[300px]"
  >
    <!-- Progress Line - Left Side (for non-first items) -->
    <div
      v-if="!isFirst && (status === 'current' || status === 'completed')"
      class="flex absolute left-0 top-2.5 right-16 z-0 justify-center items-center max-w-full w-[236px]"
    >
      <img
        :src="
          status === 'completed'
            ? 'https://cdn.builder.io/api/v1/image/assets/TEMP/0ce770bfa099ecc48c99a39f78038f6fa88c999786ed7f3af90ef0b167dc5f5e?placeholderIfAbsent=true&apiKey=474487a077de44cdafb2ac3d26297d84'
            : 'https://cdn.builder.io/api/v1/image/assets/TEMP/23d017795b4188769de20ead2768b7b3ebb0101b6bbf5e54a5ede5a3f4f175fa?placeholderIfAbsent=true&apiKey=474487a077de44cdafb2ac3d26297d84'
        "
        class="object-contain shrink-0 self-stretch my-auto aspect-[0.75] w-[3px]"
        :class="status === 'completed' ? '' : 'fill-zinc-300'"
      />
      <div
        class="flex flex-1 shrink self-stretch my-auto w-full h-1 basis-0"
        :class="status === 'completed' ? 'bg-yellow-400' : 'bg-zinc-300'"
      ></div>
      <img
        :src="
          status === 'completed'
            ? 'https://cdn.builder.io/api/v1/image/assets/TEMP/0ce770bfa099ecc48c99a39f78038f6fa88c999786ed7f3af90ef0b167dc5f5e?placeholderIfAbsent=true&apiKey=474487a077de44cdafb2ac3d26297d84'
            : 'https://cdn.builder.io/api/v1/image/assets/TEMP/73dd840bfa1c5a0bfdc570ad2004351ee3a4ed6f17c716c3ce5d8a66a1d3ee27?placeholderIfAbsent=true&apiKey=474487a077de44cdafb2ac3d26297d84'
        "
        class="object-contain shrink-0 self-stretch my-auto aspect-[0.75] w-[3px]"
        :class="status === 'completed' ? '' : 'fill-zinc-300'"
      />
    </div>

    <!-- Progress Line - Right Side (for non-last items) -->
    <div
      v-if="!isLast && status === 'completed'"
      class="flex absolute right-0 top-2.5 left-16 z-0 justify-center items-start max-w-full w-[236px]"
    >
      <div class="flex flex-1 shrink w-full h-1 bg-yellow-400 basis-0"></div>
      <img
        src="https://cdn.builder.io/api/v1/image/assets/TEMP/0ce770bfa099ecc48c99a39f78038f6fa88c999786ed7f3af90ef0b167dc5f5e?placeholderIfAbsent=true&apiKey=474487a077de44cdafb2ac3d26297d84"
        class="object-contain shrink-0 aspect-[0.75] w-[3px]"
      />
    </div>

    <!-- Current Step with Progress Lines -->
    <div
      v-if="status === 'current' && !isLast"
      class="flex flex-col self-stretch pt-2.5 my-auto text-sm leading-none text-center min-w-60 w-[300px]"
    >
      <div
        class="flex relative gap-2.5 justify-center items-center w-full text-white whitespace-nowrap"
      >
        <img
          src="https://cdn.builder.io/api/v1/image/assets/TEMP/82840574f04e759a15d0946215f0a3b463874e2505100ed10626bc0af164cb6c?placeholderIfAbsent=true&apiKey=474487a077de44cdafb2ac3d26297d84"
          class="object-contain z-0 flex-1 shrink self-stretch my-auto aspect-[35.71] basis-0 w-[145px]"
        />
        <img
          src="https://cdn.builder.io/api/v1/image/assets/TEMP/82840574f04e759a15d0946215f0a3b463874e2505100ed10626bc0af164cb6c?placeholderIfAbsent=true&apiKey=474487a077de44cdafb2ac3d26297d84"
          class="object-contain z-0 flex-1 shrink self-stretch my-auto aspect-[35.71] basis-0 w-[145px]"
        />
        <div
          class="flex absolute -bottom-2.5 left-2/4 z-0 flex-col self-start w-6 h-6 -translate-x-2/4 translate-y-[0%]"
        >
          <div class="px-0.5 w-6 h-6 bg-yellow-400 rounded-full">
            {{ stepNumber }}
          </div>
        </div>
      </div>
      <div class="self-center mt-5 text-zinc-800">
        {{ label }}
      </div>
    </div>

    <!-- Completed Step -->
    <div
      v-else-if="status === 'completed'"
      class="flex z-0 flex-col items-center text-sm leading-none text-center text-zinc-800"
    >
      <img
        src="https://cdn.builder.io/api/v1/image/assets/TEMP/a6762277-8658-4854-90bd-545b38dc5397?placeholderIfAbsent=true&apiKey=474487a077de44cdafb2ac3d26297d84"
        class="object-contain w-6 aspect-square"
      />
      <div class="mt-2.5">{{ label }}</div>
    </div>

    <!-- Upcoming Step -->
    <div
      v-else-if="status === 'upcoming'"
      class="flex z-0 flex-col items-center self-end text-sm leading-none text-center"
    >
      <div class="w-6 text-white whitespace-nowrap">
        <div class="px-0.5 w-full h-6 rounded-full bg-stone-300">
          {{ stepNumber }}
        </div>
      </div>
      <div class="mt-2.5 text-neutral-400">
        {{ label }}
      </div>
    </div>
  </article>
</template>

<script setup lang="ts">
import { StepStatus } from './Stepper.vue'

interface Props {
  status: StepStatus
  label: string
  stepNumber: number
  isFirst: boolean
  isLast: boolean
  isCurrent: boolean
}

// Define props with TypeScript interface and default values
const props = withDefaults(defineProps<Props>(), {
  isFirst: false,
  isLast: false,
  isCurrent: false,
})
</script>
